
.file-tree-container {
  position: relative;
  width: 100%;
  padding: 0 5px;
  overflow: auto;
  font-size: 13px;
  background-color: #fff;

  .file-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .tree-container {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    height: calc(~'100% - 400px');

    .el-tree {
      overflow: auto;

      .el-tree__empty-block {
        display: none;
      }
    }
  }

  .search-container {
    flex: 0 0 auto;
    padding: 10px 0;
  }

  .el-tree-node {
    margin: 5px 0;

    .el-tree-node__content {
      .el-tree-node__expand-icon {
        padding: 0;
      }
    }

    .file-mgr-tree-node {
      position: relative;
      display: inline-block;
      width: 100%;
      line-height: 30px;

      .file-status {
        display: inline-block;
        width: 6px;
        height: 6px;
        vertical-align: middle;
        border-radius: 50%;

        &.new,
        &.named {
          background: @themeColor;
        }

        &.error {
          background: #ff1949;
        }
      }

      .file-type {
        color: @themeColor;
        vertical-align: middle;
      }

      .tree-file-name {
        display: inline-block;
        width: calc(~'100% - 70px');
        overflow-x: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        vertical-align: middle;

        &.kind {
          width: 200px;
          margin-left: 20px;
        }

        &.shared-list {
          width: 180px;
        }
      }

      .operation-container {
        display: inline-block;
        vertical-align: middle;

        .el-button + .el-button {
          margin-left: 3px;
        }
      }

      .basic-info {
        float: right;
        padding-right: 40px;

        .size {
          padding-left: 35px;
          color: #c0c4cc;
        }
      }
    }
  }

  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #06f3;
  }

  .add-new-file {
    padding-left: 22px;
    color: #606266;
    vertical-align: middle;

    .el-input {
      width: 170px;
    }
  }
}
